<template>
    <el-table :data="props.GroupUsers" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="mobile" label="手机号" />
        <el-table-column prop="docNo" label="证件号码" />
    </el-table>
    <div class="button-row">
        <el-button type="primary" @click="handleSubmitForm">退 票</el-button>
        <el-button @click="handleCancel">取 消</el-button>
    </div>
</template>

<script setup>
import { onMounted, ref, defineProps, toRefs, watch, toRaw } from 'vue'
import { gbTicketRefund } from '@/api/gbTicket.js'
import { ElMessageBox, ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()

onMounted(() => {
    multipleSelection.value = []
})

const props = defineProps({
    GroupUsers: {
        type: Array,
        required: true,
    },
})

const emit = defineEmits(['cancel'])

const tableData = ref([])
const multipleSelection = ref([])

const handleSelectionChange = (data) => {
    multipleSelection.value = data.map((item) => toRaw(item))
}

// 退票
const handleSubmitForm = () => {
    const names = multipleSelection.value.map((item) => item.name).join('、')
    try {
        ElMessageBox.confirm(`确认要删除姓名为${names}的数据项?`, '警告', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        })
            .then(() => {
                const ids = multipleSelection.value.map((item) => item.id)
                console.log(ids, 'ids')
                gbTicketRefund(ids).then((res) => {
                    ElMessage({
                        type: 'success',
                        message: '退票成功',
                    })
                    handleCancel()
                })
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: `取消删除`,
                })
            })
    } catch (error) {
        console.log(error)
    }
}

// 取消
const handleCancel = () => {
    emit('cancel')
}
</script>

<style lang="scss" scoped>
.button-row {
    text-align: right;
    margin-top: 26px;
}
</style>
